<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组件号库 - 物料分析系统</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/styles.css">
</head>
<body class="bg-gray-100 p-6">
    <div class="max-w-7xl mx-auto">
        <!-- 页面标题 -->
        <div class="mb-6">
            <h1 class="text-2xl font-bold text-gray-800">组件号库</h1>
        </div>

        <!-- 搜索表单 -->
        <div class="bg-white rounded-lg shadow-md p-6 mb-6">
            <form class="grid grid-cols-1 md:grid-cols-3 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">组件号</label>
                    <input type="text" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">组件名称</label>
                    <input type="text" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">组件类型</label>
                    <select class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <option value="">全部</option>
                        <option value="机械">机械</option>
                        <option value="电子">电子</option>
                        <option value="电气">电气</option>
                        <option value="软件">软件</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">创建人</label>
                    <div class="relative">
                        <input type="text" class="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <button type="button" class="absolute right-3 top-2 text-gray-400 hover:text-gray-600">
                            <i class="fas fa-search"></i>
                        </button>
                    </div>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">创建时间</label>
                    <div class="flex space-x-2">
                        <input type="date" class="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                        <span class="self-center">至</span>
                        <input type="date" class="flex-1 px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
                    </div>
                </div>
                <div class="md:col-span-3 flex justify-end space-x-4">
                    <button type="reset" class="px-4 py-2 border rounded-lg hover:bg-gray-100">重置</button>
                    <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">查询</button>
                </div>
            </form>
        </div>

        <!-- 操作按钮 -->
        <div class="flex justify-end mb-6">
            <button class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">
                <i class="fas fa-plus mr-2"></i>新增组件
            </button>
        </div>

        <!-- 列表展示 -->
        <div class="bg-white rounded-lg shadow-md overflow-hidden">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">组件号</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">组件名称</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">组件类型</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建人</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">创建时间</th>
                        <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    <!-- 示例数据行 -->
                    <tr class="hover:bg-gray-50">
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">C-001</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">动力系统</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">机械</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">张三</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">2023-01-01</td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                            <button class="text-blue-600 hover:text-blue-900 mr-3">编辑</button>
                            <button class="text-red-600 hover:text-red-900">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 分页 -->
        <div class="mt-4 flex justify-between items-center">
            <div class="text-sm text-gray-700">
                显示 1 到 10 条，共 100 条
            </div>
            <div class="flex space-x-2">
                <button class="px-3 py-1 border rounded-lg hover:bg-gray-100">上一页</button>
                <button class="px-3 py-1 border rounded-lg bg-blue-600 text-white">1</button>
                <button class="px-3 py-1 border rounded-lg hover:bg-gray-100">2</button>
                <button class="px-3 py-1 border rounded-lg hover:bg-gray-100">3</button>
                <button class="px-3 py-1 border rounded-lg hover:bg-gray-100">下一页</button>
            </div>
        </div>
    </div>
</body>
</html> 